"use strict";
var vue = new Vue({
	el: '#app',
	data() {
		// 邮箱校验规则
		var checkEmail = (rule, value, callback) => {
			var test = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			if (!test.test(value)) {
				return callback(new Error("请输入正确的邮箱，例如：xxxxxxxxxx@qq.com"));
			}
			callback();
		};
		// 图片验证码校验
		var checkPictureVerificationCode = (rule, value, callback) => {
			var test = /^[A-Za-z0-9]{4}$/;
			if (!test.test(value)) {
				// 如果输入错误，则刷新验证码
				this.getPictureVerificationCode();
				return callback(new Error("请输入正确的图片验证码"));
			}
			callback();
		};
		// 邮箱验证码校验
		var checkEmailVerificationCode = (rule, value, callback) => {
			var test = /^[0-9]{6}$/;
			if (!test.test(value)) {
				return callback(new Error("请输入正确的邮箱验证码"));
			}
			callback();
		};
		// 用户协议勾选校验
		var checkUserAgreement = (rule, value, callback) => {
			if (!value) {
				return callback(new Error("请勾选用户协议"));
			}
			callback();
		};
		return {
			vueHeader: {},
			// pictureVerificationCodeUrl: "", // 图片验证码地址
			pictureDisabled: false, // 图片验证码输入框和图片验证码图片按钮是否可用，true为不可用，false为可用
			emailButtonDisabled: false, // 发送邮件按钮是否可用，true为不可用，false为可用
			emailButtonTextTime: 0, // 发送邮件按钮再次可用的倒计时
			loginButtonDisabled: false, // 登录按钮是否可用，true为不可用，false为可用
			ruleForm: {
				email: "",
				pictureVerify: "",
				emailVerify: "",
				userAgreement: false
			},
			rules: {
				email: [
					{ required: true, message: "请输入邮箱", trigger: "blur" },
					{ validator: checkEmail, trigger: "blur" }
				],
				pictureVerify: [
					{ required: true, message: "请输入图片验证码", trigger: "blur" },
					{ validator: checkPictureVerificationCode, trigger: "blur" }
				],
				emailVerify: [
					{ required: true, message: "请输入邮箱验证码", trigger: "blur" },
					{ validator: checkEmailVerificationCode, trigger: "blur" }
				],
				userAgreement: [
					{ validator: checkUserAgreement, trigger: "change" }
				]
			},
			// 图片验证码的样式
			// 如果使用的是img标签，则不好与下面的邮箱按钮对齐
			// 如果将样式定义在css中，在背景发生改变的时候，css中的样式会清除
			// 这样设计会是:hover失效
			pictureVerificationCodeStyle: {
				backgroundImage: "", // 验证码图片，动态获取
				float: "left",
				backgroundRepeat: "no-repeat",
				backgroundPosition: "center",
				backgroundSize: "contain"
			},
			test: "test"
		}
	},
	//钩子函数，VUE对象初始化完成后自动执行
	created() {
		// 加载验证码图片
		this.getPictureVerificationCode();
	},
	mounted() {

	},
	methods: {
		// 获取验证码
		getPictureVerificationCode() {
			console.log("准备刷新图片验证码...");
			this.pictureVerificationCodeStyle.backgroundImage =
				"url(" + addressPVCCGetPicture + "?timestamp=" + new Date().getTime() + ")";
		},

		// 发送邮箱验证码
		sendEmailVerificationCode() {
			console.log("准备发送邮箱验证码...");
			// 对邮箱和图片验证码单独校验
			let checkList = ["email", "pictureVerify"]; // 要进行校验的表单项
			let count = 0; // 已经通过校验的表单项的数目
			this.$refs["ruleForm"].validateField(checkList,
				(valid) => {
					if (!valid) count++;
					if (count == checkList.length) {
						console.log("邮箱和图片验证码校验通过，正在请求服务器向" +
							this.ruleForm.email + "发送邮件...");
						// 弹窗提示
						this.$notify.info({
							title: '消息',
							message: "正在向您的邮箱发送邮件，请稍后！"
						});
						this.pictureDisabled = true; // 图片验证码禁用
						// 设置发送邮箱验证码按钮
						this.emailButtonDisabled = true;
						this.emailButtonTextTime = 60;
						let countDownInterval = setInterval(() => {
							// this.emailButtonTextTime--;
							if (--this.emailButtonTextTime == 0) {
								this.emailButtonDisabled = false; // 邮箱发送按钮启用
								this.pictureDisabled = false; // 图片验证码启用
								clearInterval(countDownInterval);
							}
						}, 1000);
						// 发送请求
						axios.post(
							// "/emailVC/send",
							addressEVCCSendEmail,
							{
								"code": this.ruleForm.pictureVerify,
								"email": this.ruleForm.email
							}
						).then(
							(result) => {
								console.log(result.data);
								if (result.data.flag) {
									// 邮箱发送成功
									// 弹窗提示
									this.$notify({
										title: "成功",
										message: result.data.message,
										type: "success"
									});
								} else {
									// 邮箱发送失败
									this.$notify.error({
										title: "错误",
										message: result.data.message
									});

									this.getPictureVerificationCode(); // 刷新图片验证码
									this.emailButtonTextTime = 5; // 重置按钮等待时间
								}
							}
						);
					}
				}
			);
		},
		// 表单校验
		submitForm(formName) {
			// 设置登录按钮不可用
			this.loginButtonDisabled = true;
			this.$refs[formName].validate((valid) => {
				if (valid) { // 表单校验通过
					console.log("准备登录...");
					console.log(this.ruleForm);
					axios.post(
						// "/users/emailLogin",
						addressUCEmailLoginOrRegister,
						{
							"code": this.ruleForm.emailVerify,
							"email": this.ruleForm.email
						})
						.then((result) => {
							if (result.data.flag) {
								this.$notify({
									title: "成功",
									message: result.data.message,
									type: "success"
								});
								// 跳转到主页
								setTimeout(() => {
									location.href = "/index.html";
								}, "1000");
							} else {
								this.$notify.error({
									title: "错误",
									message: result.data.message
								});
								// 设置登录按钮可用
								this.loginButtonDisabled = false;
							}
						});
				} else { // 表单校验未通过
					console.log("表单校验失败");
					this.loginButtonDisabled = false; // 恢复按钮
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		// 注意，此方法由vueHeader在创建时自动调用，参数为vueHeader自身对象
		// 可以在vueHeader对象中获取到它的所有信息
		vueHeaderCreated(vueHeader) {
			this.vueHeader = vueHeader;
		}
	}
});